<template>
	<view>
		<view style="margin-top: 20rpx"></view>
      <van-cell-group inset> 
				<van-cell title="汇报日期" :value="time"  />
      </van-cell-group>
			<view class="card">
				 <view style="display: flex;align-items:center;">
					<view style="flex:1">工作内容</view> 
				</view> 
				<view>
					<scroll-view scroll-x>
						<el-table :data="tableData" style="width: 100%" height="250">
							<el-table-column fixed prop="name" label="工作类别" width="180" />
							<el-table-column prop="state" label="任务清单" width="120" />
							<el-table-column prop="date" label="开始时间" width="120" />
							<el-table-column prop="date" label="结束时间" width="320" />
							<el-table-column prop="address" label="工作内容" width="600" />
							<el-table-column prop="zip" label="明日计划" width="120" />
						</el-table>
					</scroll-view>
				</view>
			</view>
			<view class="card">
				<view>汇报给</view>
				<view class="userList">
					  <view class="userItem">
							  <view>
									 <image
										src="../../static/images/avatar.jpg"
										mode="scaleToFill"
										class="avatar"
									 />
								</view>
							  <view class="nickname">
									部门负责人
								</view>
						</view>
						<!-- <view class="userItem">
							  <view class="avatar1 ">
									  <van-icon name='plus' size="30" color="#8D8D8D"></van-icon>
								</view>
						</view> -->
				</view>
			</view>
			<view class="" style="display: flex;padding: 0 30rpx;width: 100%;box-sizing: border-box;">
				 <view style="flex:1"><view class="btn">提交</view></view>
				 <view style="flex:1"><view class="btn btn1"  @click="routeBack()">修改</view></view>
			</view> 
			<van-calendar :show="showTime" @confirm="onConfirm" @close="onClose"/>
			
	</view>
</template>

<script setup>
const time=ref('2024/2/2')
const showTime=ref(false)
const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
const routeTo=(url)=>{
   uni.navigateTo({
		url:url
	 })
}
const routeBack=()=>{
	uni.navigateBack({
		delta:1,
	})
}
const tableData = ref([
  {
    date: '2016-05-03',
    name: '庭前准备的事务性工作',
    state: 'xxx',
    city: 'xxx',
    address: 'xxx',
    zip: 'xxx',
  },
  {
    name: '参与庭审工作', 
    date: '2016-05-04',
    state: 'xxx',
    city: 'xxx',
    address: 'xxx',
    zip: 'xxx',
  },
	{
    name: '参与庭审工作', 
    date: '2016-05-04',
    state: 'xxx',
    city: 'xxx',
    address: 'xxx',
    zip: 'xxx',
  },
	{
    name: '参与庭审工作', 
    date: '2016-05-04',
    state: 'xxx',
    city: 'xxx',
    address: 'xxx',
    zip: 'xxx',
  },
  {
    date: '2016-05-04',
    name: '校对法律文书',
    state: 'xxx',
    city: 'xxx',
    address: 'xxx',
    zip: 'xxx',
  }, 
])
</script>

<style lang="scss" scoped>
.userList{
	display: flex;
	padding-top: 30rpx;
	flex-wrap: wrap;
	.userItem{
		margin-bottom: 20rpx;
		padding:0 20rpx;
		.avatar1{
			width: 120rpx;
			height: 120rpx;
			display: block;
			border-radius: 20rpx;
			border: 1px solid #e1e1e1;
			text-align: center; 
			display: flex;
			align-items: center;
			justify-content: center;
		}
     .avatar{
			width: 120rpx;
			height: 120rpx;
			display: block;
		 }
		 .nickname{
			padding-top: 20rpx;
		 }
	}
}
.card{
	width: 690rpx;
	border-radius: 20rpx;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	margin: 20rpx auto;
	background: #fff;
	font-size: 28rpx;
}

.btn {
  width: 93%;
  height: 88rpx;
  border-radius: 10rpx;
  text-align: center;
  line-height: 88rpx;
  background: #1158bf;
  color: #fff;
  margin: 0 auto;
  margin-top: 100rpx;
}
.btn1{
	width: 93%;
  height: 88rpx;
  border-radius: 10rpx;
  text-align: center;
  line-height: 88rpx;
  background: #fff; 
  margin: 0 auto;
  margin-top: 100rpx;
	border: 1px solid #1158bf;
	color: #1158bf;
	box-sizing: border-box;
}
</style>
